<template>
  <div>
    <br />
    <a-row :gutter="24">
      <a-col :span="12">
        <a-card>
          <InforMation ref="InforMation"></InforMation>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card>
          <BasicData></BasicData>
        </a-card>
      </a-col>
    </a-row>

    <!--  信息区域  -->
    <br />
    <div class="app-container">
      <!-- <a-row :gutter="10">
        <a-col :xl="13" :xxl="13">
          <a-row :gutter="13">
            <a-col :xl="6" :xxl="6">
              <div class="bg historybox">
                <ul class="quantityOFGacility">
                  <li>
                    <h5 :style="{ color: alarmStatues[0], 'margin-bottom': 0 }">
                      暂无
                    </h5>
                    <p class="skin" style="margin-bottom: 0">设备综合效率</p>
                    <a :style="{ 'background-color': alarmStatues[0] }"></a>
                  </li>
                  <li>
                    <h5 :style="{ color: alarmStatues[1], 'margin-bottom': 0 }">
                      {{ timeActivationData || 0 }}%
                    </h5>
                    <p class="skin" style="margin-bottom: 0">时间稼动率</p>
                    <a :style="{ 'background-color': alarmStatues[1] }"></a>
                  </li>
                  <li>
                    <h5 :style="{ color: alarmStatues[2], 'margin-bottom': 0 }">
                      {{ qualityActivationData || 0 }}%
                    </h5>
                    <p class="skin" style="margin-bottom: 0">性能稼动率</p>
                    <a :style="{ 'background-color': alarmStatues[2] }"></a>
                  </li>
                </ul>
              </div>
            </a-col>

            
            <a-col :xl="18" :xxl="18">
              <AlarmStatistis
                :AveNoAlarmTimeData="AveNoAlarmTimeData"
                :StateTimePieData="StateTimePieData"
              />
            </a-col>
          </a-row>
        </a-col>

        <a-col :xl="11" :xxl="11">
          <TimeStatistis :DefMonthOnAndRunTimeData="DefMonthOnAndRunTimeData" />
        </a-col>
      </a-row> -->

      <a-row :gutter="10">
        <a-col :xl="12" :xxl="12">
          <!-- <AlarmHistorycom /> -->
          <TimeStatistis style="margin-right: 7px;" :DefMonthOnAndRunTimeData="DefMonthOnAndRunTimeData" />
        </a-col>
        <a-col :xs="{ span: 12 }" :lg="{ span: 12 }">
          <YieldAndTime
            style="margin-left: 7px;"
            :DefMonthProduceDayData="DefMonthProduceDayData"
            :DefMonthAlarmTimeData="DefMonthAlarmTimeData"
          />
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import api from "@/api/apiServer";
import { getDayAll } from "@/unit/tool";
import InforMation from "./components/InforMation.vue";
import BasicData from "./components/BasicData.vue";
import AlarmStatistis from "./components/AlarmStatistis";
import TimeStatistis from "./components/TimeStatistis";
import AlarmHistorycom from "./components/AlarmHistorycom";
import YieldAndTime from "./components/YieldAndTime";
import { alarmStatues } from "./components/tabConfig";
// import MachineTool from "./components/MachineTool.vue";

export default {
  components: {
    InforMation,
    BasicData,
    AlarmStatistis,
    TimeStatistis,
    AlarmHistorycom,
    YieldAndTime,
  },
  data() {
    return {
      current: 0, // 当前选中
      alarmStatues,
      timeActivationData: "",
      qualityActivationData: "",
      AveNoAlarmTimeData: {}, //机床开机时间、报警次数、平均无报警时间
      StateTimePieData: {
        1000: 0,
        2000: 0,
        3000: 0,
        4000: 0,
      }, // 饼图数据
      DefMonthOnAndRunTimeData: {
        // 时间统计数据
        expectedData: [],
        date: [],
        name: ["运行时间", "开机时间"],
      },
      DefMonthAlarmTimeData: [],
      DefMonthProduceDayData: [],
    };
  },
  computed: {
    macSn() {
      return this.$route.query.macSn;
    },
    startTime() {
      return moment()
        .subtract(7, "days")
        .format("YYYY-MM-DD");
    },
    endTime() {
      return moment()
        .subtract(1, "days")
        .format("YYYY-MM-DD");
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    setAlarm() {
      this.$refs.InforMation.reload();
    },
    init() {
      this.getDefMonthOnAndRunTime();
      this.DefMonthProduceDay();
      this.MacStateTimePie();
      this.getAveNoAlarmTime();
      this.getTimeActivation();
      this.getQualityActivation();
    },
    //查询时间段内机床每天的开机和运行时间（小时
    async getDefMonthOnAndRunTime() {
      let params = {
        MacSN: this.macSn,
        startTime: this.startTime,
        endTime: this.endTime,
      };
      const res = await api.DefMonthOnAndRunTime(params);
      console.log(res, "时间");
      if (res.code === 200) {
        this.havelinedata(res.data);
      } else {
        this.havelinedata([]);
      }
    },
    //折线图数据转换
    havelinedata(list) {
      let expectedData = [];
      let dates = null;
      dates = getDayAll(this.startTime, this.endTime);

      let data = [];
      let data2 = [];
      dates.forEach((items) => {
        let opt = null;
        if (list.length > 0) {
          opt = list.find((day) => day.day == items);
        } else {
          opt = null;
        }

        if (opt) {
          data.push(opt.workrate);
          data2.push(opt.runtime);
        } else {
          data.push(0);
          data2.push(0);
        }
      });
      expectedData.push(data2);
      expectedData.push(data);

      this.DefMonthOnAndRunTimeData.expectedData = expectedData;
      this.DefMonthOnAndRunTimeData.date = dates;
      this.DefMonthOnAndRunTimeData.name = ["运行时间", "开机时间"];
    },
    //查询时间段内机床每天的加工件数
    async DefMonthProduceDay() {
      let params = {
        MacSN: this.macSn,
        startTime: this.startTime,
        endTime: this.endTime,
      };

      const { data: res } = await api.DefMonthProduceDay(params);
      let dates = getDayAll(this.startTime, this.endTime);
      let DefMonthProduceDayData = res;
      let data = [];
      dates.forEach((item) => {
        let params = {};
        let opt = DefMonthProduceDayData.find((option) => {
          let day = option.day <= 9 ? "0" + option.day : option.day;
          let month = option.month <= 9 ? "0" + option.month : option.month;
          let time = option.year + "-" + month + "-" + day;
          if (item == time) {
            return option;
          } else {
            return "";
          }
        });
        params.time = item;
        if (opt) {
          params.total = opt.total;
          params.rate = parseInt(opt.rate * 100);
        } else {
          params.total = 0;
          params.rate = 0;
        }
        data.push(params);
      });
      // data.sort(this.compare("time")).reverse();
      this.DefMonthProduceDayData = data;
    },
    // 运行图
    async MacStateTimePie() {
      let params = {
        macsn: this.macSn,
        startTime: this.startTime,
        endTime: this.endTime,
      };
      const res = await api.MacStateTimePie(params);
      if (res.code === 200) {
        this.StateTimePieData = res.data;
      } else {
        this.StateTimePieData = { 1000: 0, 2000: 0, 3000: 0, 4000: 0 };
      }
    },
    //机床开机时间、报警次数、平均无报警时间
    async getAveNoAlarmTime() {
      let params = {
        macsn: this.macSn,
        startTime: this.startTime,
        endTime: this.endTime,
      };
      const res = await api.AveNoAlarmTime(params);
      this.AveNoAlarmTimeData = res.data;
    },
    //时间稼动率
    async getTimeActivation() {
      let params = {
        MacSN: this.macSn,
        startTime: this.startTime,
        endTime: this.endTime,
      };
      const { data: res } = await api.TimeActivation(params);
      this.timeActivationData = (res.timeActivation * 100).toFixed(2);
    },
    //性能稼动率;
    async getQualityActivation() {
      let params = {
        MacSN: this.macSn,
        startTime: this.startTime,
        endTime: this.endTime,
      };
      const { data: res } = await api.QualityActivation(params);
      this.qualityActivationData = (res.qualityActivation * 100).toFixed(2);
    },
  },
};
</script>

<style scoped lang="less">
@import "index.less";
</style>
